<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
            <a-col :md="4" :sm="24" >
              <span>
                <a-button type="primary" @click="createCode">新增激活码</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <standard-table
        :rowKey="(record, index) => index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
      <template slot="one_time" slot-scope="one_time" >
          <a-tag v-if="one_time.text" :color="colorMap[one_time.text]">
            {{ statusMap[one_time.text] }}
          </a-tag>
        </template>
      </standard-table>
    </div>
    <a-modal
      title="新增激活码"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-item
        label="业务员"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-input v-model="name"/>
      </a-form-item>
      <a-form-item
        label="备注"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-input v-model="desc"/>
      </a-form-item>
      <a-form-item
        label="使用次数"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 10}"
      >
        <a-radio-group v-model="ono_time">
          <a-radio value="">
            多次使用
          </a-radio>
          <a-radio value="1">
            一次性
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-modal>
  </a-card>
</template>

<script>
import { colorMap } from '@/utils/enum'
import * as Api from '@/services/index'
import StandardTable from '@/components/table/StandardTable'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '激活码',
    dataIndex: 'code'
  },
  {
    title: '业务员',
    dataIndex: 'name'
  },
  {
    title: '备注',
    dataIndex: 'desc'
  },
  {
    title: '是否一次性',
    dataIndex: 'one_time',
    scopedSlots: { customRender: 'one_time' }
  },
]

export default {
  name: 'OrderList',
  components: {StandardTable},
  data () {
    return {
      statusMap: {
        '1': '一次性',
        '2': '已使用'
      },
      colorMap: colorMap,
      advanced: true,
      visible: false,
      name: '',
      desc: '',
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: { 
        pageSize: 10, 
        total: 1,
        current: 1,
      },
      codeType: '1',
      ono_time: ''
    }
  },
  created() {
    this.getCodeList()
  },
  methods: {
    initPage() {
      this.pagination = { 
        pageSize: 10, 
        total: 1,
        current: 1,
      }
    },
    getCodeList() {
      let params = {
        type: this.codeType,
        page: this.pagination.current
      }
      Api.ActivaCodeList(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 生成激活码
    createCode() {
      this.visible = true;
    },
    handleOk() {
      let params = {
        name: this.name, 
        desc: this.desc,
        one_time: this.ono_time
      }
      Api.CreateActivaCode(params).then(() => {
        this.getCodeList()
        this.handleCancel()
      })
    },
    handleCancel() {
      this.name = ''
      this.desc = ''
      this.ono_time = ''
      this.visible = false;
    },
    // 分页
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getCodeList()
    },
    submitSearch() {
      this.initPage()
      this.getCodeList()
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    // margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
